<template>
  <div>
    <el-input v-model="showDeptName" :placeholder="placeholder" @click="deptDialog">
      <template v-slot:append>
        <el-button icon="search" @click="deptDialog"></el-button>
      </template>
    </el-input>
    <el-dialog v-model="visibleDept" width="35%" :modal="false" :title="placeholder" :close-on-click-modal="false" :close-on-press-escape="false">
      <el-form size="small" :inline="true" :model="dataForm" @keyup.enter="getDataList()">
        <el-form-item>
          <el-input v-model="dataForm.username" :placeholder="$t('user.username')" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <ren-dept-tree v-model="dataForm.deptId" :placeholder="$t('dept.title')" :query="true"></ren-dept-tree>
        </el-form-item>
        <el-form-item>
          <el-button @click="getDataList()">{{ $t("query") }}</el-button>
        </el-form-item>
      </el-form>

      <el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" @sort-change="dataListSortChangeHandle" style="width: 100%; margin-top: 15px">
        <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
        <el-table-column prop="username" :label="$t('user.username')" sortable="custom" header-align="center" align="center"></el-table-column>
        <el-table-column prop="deptName" :label="$t('user.deptName')" header-align="center" align="center"></el-table-column>
      </el-table>
      <el-pagination :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="total" layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle" @current-change="pageCurrentChangeHandle"> </el-pagination>

      <template v-slot:footer>
        <el-button type="default" @click="cancelHandle()">{{ $t("cancel") }}</el-button>
        <el-button type="info" @click="clearHandle()">{{ $t("clear") }}</el-button>
        <el-button type="primary" @click="commitHandle()">{{ $t("confirm") }}</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from "vue";
import { IObject } from "@/types/interface";
import baseService from "@/service/baseService";
import useView from "@/hooks/useView";
export default defineComponent({
  name: "RenUserSelector",
  setup() {
    const state = reactive({
      getDataListURL: "/sys/user/page",
      getDataListIsPage: true,
      deleteURL: "/sys/user",
      deleteIsBatch: false,
      exportURL: "/sys/user/export",
      dataForm: {
        username: "",
        deptId: "",
        postId: "",
        gender: ""
      }
    });
    return { ...useView(state), ...toRefs(state) };
  },
  data() {
    return {
      filterText: "",
      visibleDept: false,
      deptList: [],
      showDeptName: "",
      expandedKeys: [] as string[],
      defaultProps: {
        children: "children",
        label: "label"
      },
      userId: ""
    };
  },
  props: {
    modelValue: String,
    adminId: String,
    adminName: String,
    query: Boolean,
    placeholder: String
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
    adminId(val) {
      this.userId = val;
    },
    adminName(val) {
      this.showDeptName = val;
    }
  },
  methods: {
    deptDialog() {
      this.expandedKeys = [];
      this.visibleDept = true;
      //this.getDeptList(this.modelValue);
    },
    filterNode(value: string, data: IObject) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    getDeptList(id?: string) {
      return baseService.get("/sys/dept/list").then((res) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg);
        }
        this.deptList = res.data;
        this.$nextTick(() => {
          if (id) {
            this.$refs.tree.setCurrentKey(id);
            this.expandedKeys = [id];
          }
        });
      });
    },
    cancelHandle() {
      this.visibleDept = false;
      this.deptList = [];
      this.filterText = "";
    },
    clearHandle() {
      this.$emit("update:adminId", "");
      this.$emit("update:adminName", "");
      this.showDeptName = "";
      this.visibleDept = false;
      this.deptList = [];
      this.filterText = "";
    },
    commitHandle() {
      if (this.dataListSelections!.length > 1) {
        this.$message.error("只能选择一个管理员");
        return;
      }
      if (this.dataListSelections!.length == 0) {
        this.$message.error("请选择一个管理员");
        return;
      }
      this.$emit("update:adminId", this.dataListSelections![0].id);
      this.$emit("update:adminName", this.dataListSelections![0].username);
      this.showDeptName = this.dataListSelections![0].username;
      this.visibleDept = false;
      this.deptList = [];
      this.filterText = "";
    }
  }
});
</script>
